<script setup lang="ts">
	import { ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import setupApi from '@/api/zhitan/setup.ts'
	import GetCoupon from './getcoupon.vue'
	import useUserStore from '@/store/modules/user'


	const userStore : any = useUserStore()


	const formRef1 = ref<FormInstance>()

	const showEdit = ref(false)
	const showEditer = ref(false)
	const data1 : any = ref({})
	const data2 : any = ref({})
	const ischange = ref(true)
	const showGetCoupon = ref(false)

	const appletconfig : any = ref({})// 小程序
	const serviceconfig : any = ref({})// 客服
	const newusercouponconfig : any = ref({
		coupon_name: ''
	})// 新用户赠送优惠券配置

	const cachetconfig : any = ref({})// 公章
	const readpactconfig : any = ref({})// 合同


	const inviteswitchconfig : any = ref({
		invite_switch_config: 1
	})


	const logo = new URL('../../../assets/images/logo.png', import.meta.url).href
	onMounted(() => {
		getAppletconfig() //获取小程序
		getServiceconfig() //获取客服
		getNewusercouponconfig() //新用户赠送优惠券配置
		getReadpactconfig() //合同配置
		getCachetconfig() //公章配置


		getInviteswitchconfig() //分销申请开关
	})

	function getCachetconfig() {
		setupApi.setting_info({ key: "cachet" }).then((res : any) => {
			console.log(res, 'res.data.value')
			cachetconfig.value = JSON.parse(JSON.stringify(res.values))
		})
	}
	function getReadpactconfig() {
		setupApi.setting_info({ key: "read_pact_config" }).then((res : any) => {
			console.log(res, 'res.data.value')
			readpactconfig.value = JSON.parse(JSON.stringify(res.values))
		})
	}
	function getNewusercouponconfig() {
		setupApi.setting_info({ key: "new_user_coupon_config" }).then((res : any) => {
			console.log(res, 'res.data.value')
			newusercouponconfig.value = JSON.parse(JSON.stringify(res.values))
		})
	}
	function getServiceconfig() {
		setupApi.setting_info({ key: "service_config" }).then((res : any) => {
			console.log(res, 'res.data.value')
			serviceconfig.value = JSON.parse(JSON.stringify(res.values))
		})
	}
	function getAppletconfig() {
		setupApi.setting_info({ key: "applet_config" }).then((res : any) => {
			console.log(res, 'res.data.value')
			appletconfig.value = JSON.parse(JSON.stringify(res.values))
		})
	}
	function getInviteswitchconfig() {
		// setupApi.setting_info({ key: "invite_switch_config" }).then((res : any) => {
		// 	inviteswitchconfig.value = JSON.parse(res.data.values)
		// })
	}
	function changeNewusercouponconfig(e : any) {

		if (ischange.value) {
			setTimeout(() => {
				ischange.value = false
			}, 1000)
			return
		}
		if (!userStore.permissions.includes('zengsongedit')) {
			ElMessage.info('您没有编辑权限！')
			newusercouponconfig.value.switch = e === 0 ? 1 : 0
			return
		}

		console.log(e, 'klkk')
		setupApi.setting_edit({
			key: "new_user_coupon_config",
			values: JSON.stringify({ switch: e, coupon_id: newusercouponconfig.value.coupon_id, coupon_name: newusercouponconfig.value.coupon_name })
		}).then((res : any) => {
			if (res.code === 0) {
				ElMessage.success('修改成功')
				getNewusercouponconfig()
			}

		})
	}
	function changeSelfpurchase(e : any) {
		if (ischange.value) {
			setTimeout(() => {
				ischange.value = false
			}, 1000)
			return
		}

		console.log(e, 'klkk')
		// setupApi.setting_edit({
		// 	key: "invite_switch_config",
		// 	values: JSON.stringify({ invite_switch_config: inviteswitchconfig.value.invite_switch_config, selfpurchase: inviteswitchconfig.value.selfpurchase })
		// }).then((res : any) => {
		// 	if (res.code === 0) {
		// 		ElMessage.success('修改成功')
		// 		getInviteswitchconfig()
		// 	}

		// })
	}

	function submitForm() {
		// form.value = data1.value
		if (show.value.type === 1) {
			setupApi.setting_edit({ key: "applet_config", values: JSON.stringify(form.value) }).then((res : any) => {
				ElMessage.success('修改成功')
				getAppletconfig()
			})
		} else if (show.value.type === 2) {
			setupApi.setting_edit({ key: "service_config", values: JSON.stringify(form.value) }).then((res : any) => {
				ElMessage.success('修改成功')
				getServiceconfig()
			})
		} else if (show.value.type === 3) {
			setupApi.setting_edit({ key: "new_user_coupon_config", values: JSON.stringify(form.value) }).then((res : any) => {
				ElMessage.success('修改成功')
				getNewusercouponconfig()
			})
		} else if (show.value.type === 4) {
			setupApi.setting_edit({ key: "cachet", values: JSON.stringify(form.value) }).then((res : any) => {
				ElMessage.success('修改成功')
				getCachetconfig()
			})
		} else if (show.value.type === 5) {
			setupApi.setting_edit({ key: "read_pact_config", values: JSON.stringify(form.value) }).then((res : any) => {
				ElMessage.success('修改成功')
				getReadpactconfig()
			})
		}

		show.value.addAndModify = false
	}


	const show : any = ref({
		type: 1,
		typeName: ['', '小程序配置', '客服配置', '新用户赠送优惠券配置', '合同配置', '七牛云上传配置', '阿里云短信配置', '公众号配置'],
		addAndModify: false,
	})


	function changeShowType(type : any) {
		show.value.type = type
		if (type === 1) {
			form.value = JSON.parse(JSON.stringify(appletconfig.value))
		} else if (type === 2) {
			form.value = JSON.parse(JSON.stringify(serviceconfig.value))
		} else if (type === 3) {
			form.value = JSON.parse(JSON.stringify(newusercouponconfig.value))
		} else if (type === 4) {
			form.value = JSON.parse(JSON.stringify(cachetconfig.value))
		}
		console.log(form.value, 'form.value55')
		show.value.addAndModify = true
	}
	const form : any = ref({})
	const formRef = ref<FormInstance>()
	const formRules = ref({
		name: [{
			required: true,
			message: '请输入企业名称',
			trigger: 'blur',
		}],
		address: [{
			required: true,
			message: '请输入企业地址',
			trigger: 'blur',
		}],
		// phone: [{
		// 	required: true,
		// 	message: '请输入客服联系方式',
		// 	trigger: 'blur',
		// }],
		// wxQrcode: [{
		// 	required: true,
		// 	message: '请输入客服二维码',
		// 	trigger: 'blur',
		// }],
	})

	function handleSuccess(row : any) {
		console.log(row, 'rrowrowrowowrrowrowrowow')
		form.value.wxQrcode = row
	}
	function handleSuccessimage(row : any) {
		console.log(row, 'rrowrowrowowrrowrowrowow')
		form.value.image = row
	}

	function changedata(e : any) {
		console.log(e, 'rrowrowrowowrrowrowrowow')
		form.value.coupon_name = e.name
		form.value.coupon_id = e.id

		showGetCoupon.value = false
	}
</script>

<template>
	<div style="overflow-y: auto;">
		<div class="w-full flex flex-col gap-4 px-4 xl:flex-row mt-6">
			<PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#e67c28]">
								小程序配置
							</h1>
						</div>
					</div>
					<div class="ml-auto" v-if="userStore.permissions.includes('xiaochengxuedit')">
						<HButton outline @click="changeShowType(1)">
							编辑
						</HButton>
					</div>
				</template>
				<div class="boxaa pb-4">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<li>
							<span class="wid100">小程序名称</span> <span class="">{{ appletconfig.name }}</span>
						</li>
						<li>
							<span class="wid100">AppID</span> <span class="">{{ appletconfig.AppID }}</span>
						</li>
						<li>
							<span class="wid100">AppSecret</span> <span class="">{{ appletconfig.AppSecret }}</span>
						</li>
						<li>
							<span class="wid100">首页分享标语</span> <span class="">{{ appletconfig.title }}</span>
						</li>
					</ul>
				</div>
			</PageMain>
			<PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#e67c28]">
								客服配置
							</h1>
						</div>
					</div>
					<div class="ml-auto" v-if="userStore.permissions.includes('kefuedit')">
						<HButton outline @click="changeShowType(2)">
							编辑
						</HButton>
					</div>
				</template>
				<div class="boxaa pb-4">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<li>
							<span class="wid100">客服联系电话</span> <span class="">{{ serviceconfig.phone }}</span>
						</li>
						<li class="pt-8">
							<span class="wid100">客服二维码</span> <span class="">
								<!-- {{ serviceconfig.wxQrcode }} -->
								<image-preview :src="serviceconfig.wxQrcode" :width="100" :height="100" class="" />
							</span>
						</li>
					</ul>
				</div>
			</PageMain>

			<!-- <PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#41b883]">
								分销申请开关
							</h1>
						</div>
					</div>
				</template>
				<div class="boxaa pb16">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<li>
							<span class="wid100">开启分销申请</span> <span class="ml120"> <el-switch v-model="inviteswitchconfig.invite_switch_config"
								 :active-value="1" @change="changeInviteswichconfig"
								      :inactive-value="0"	inline-prompt active-text="是" inactive-text="否" /></span>
						</li>
						<li>
							<span class="wid100">启用分销员自购</span> <span class="ml120"> <el-switch v-model="inviteswitchconfig.selfpurchase"
								 :active-value="1" @change="changeSelfpurchase"
								      :inactive-value="0"	inline-prompt active-text="是" inactive-text="否" /></span>
						</li>

					</ul>

				</div>
			</PageMain> -->

			<!-- <PageMain class="ecology">
        <template #title>
          <div class="title-info">
            <div>
              <h1 class="c-[#e60000]">
                七牛云上传配置
              </h1>
            </div>
          </div>
          <div class="ml-auto">
            <HButton outline @click="changeShowType(2)">
              编辑
            </HButton>
          </div>
        </template>
        <div class="boxaa pb16">
          <ul class="f16 m-0 pr-8 text-size-sm leading-6">
			  <li>
			    <span class="wid100">开关</span> <span class="ml80">{{ form1.switch }}</span>
			  </li>
            <li>
              <span class="wid100">名称</span> <span class="ml80">{{ form1.name }}</span>
            </li>
            <li>
              <span class="wid100">BUCKET</span> <span class="ml80">{{ form1.BUCKET }}</span>
            </li>
            <li>
              <span class="wid100">DOMAIN</span> <span class="ml80">{{ form1.DOMAIN }}</span>
            </li>
            <li>
              <span class="wid100">ACCESSKEY</span> <span class="ml80">{{ form1.ACCESSKEY }}</span>
            </li>
            <li>
              <span class="wid100">SECRETKEY</span> <span class="ml80">{{ form1.SECRETKEY }}</span>
            </li>
			<li>
			  <span class="wid100">REQUEST_DOMAIN</span> <span class="ml80">{{ form1.REQUEST_DOMAIN }}</span>
			</li>
			
          </ul>
        </div>
      </PageMain>
    </div>
    <div class="w-full flex flex-col gap-4 px-4 xl:flex-row mt-4">
      <PageMain class="ecology">
        <template #title>
          <div class="title-info">
            <div>
              <h1 class="c-[#41b883]">
                阿里云短信配置
              </h1>
            </div>
          </div>
          <div class="ml-auto">
            <HButton outline @click="changeShowType(3)">
              编辑
            </HButton>
          </div>
        </template>
        <div class="boxaa pb16">
          <ul class="f16 m-0 pr-8 text-size-sm leading-6">
			  <li>
			    <span class="wid100">开关</span> <span class="ml80">{{ form.switch }}</span>
			  </li>
			  <li>
			    <span class="wid100">名称</span> <span class="ml80">{{ form.name }}</span>
			  </li>
            <li>
              <span class="wid100">sign</span> <span class="ml80">{{ form.sign }}</span>
            </li>
			<li>
			  <span class="wid100">AccessKeyID</span> <span class="ml80">{{ form.AccessKeyID }}</span>
			</li>
            <li>
              <span class="wid100">AccessKeySecret</span> <span class="ml80">{{ form.AccessKeySecret }}</span>
            </li>
          </ul>
        </div>
      </PageMain>
      <PageMain class="ecology">
        <template #title>
          <div class="title-info">
            <div>
              <h1 class="c-[#e60000]">
                公众号配置
              </h1>
            </div>
          </div>
          <div class="ml-auto">
            <HButton class="mr10">
              一键复制
            </HButton>
            <HButton outline @click="changeShowType(4)">
              编辑
            </HButton>
          </div>
        </template>
        <div class="boxaa pb16" style="">
          <ul class="f16 m-0 pr-8 text-size-sm leading-6">
            <li>
              <span class="wid100">公众号名称</span> <span class="ml80">{{ form1.name }}</span>
            </li>
            <li>
              <span class="wid100">AppID</span> <span class="ml80">{{ form1.taxpayernum }}</span>
            </li>
            <li>
              <span class="wid100">AppSecret</span> <span class="ml80">{{ form1.email }}</span>
            </li>
          </ul>
        </div>
      </PageMain> -->
		</div>
		<div class="w-full flex flex-col gap-4 px-4 xl:flex-row mt-6">
			<PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#e67c28]">
								新用户赠送优惠券配置
							</h1>
						</div>
					</div>
					<div class="ml-auto" v-if="userStore.permissions.includes('zengsongedit')">
						<HButton outline @click="changeShowType(3)">
							编辑
						</HButton>
					</div>
				</template>
				<div class="boxaa pb-4">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<li>
							<span class="w-50">开启新用户赠送优惠券配置</span> <span class=""> <el-switch
									v-model="newusercouponconfig.switch" :active-value="1"
									@change="changeNewusercouponconfig" :inactive-value="0" inline-prompt
									active-text="是" inactive-text="否" /></span>
						</li>
						<li>
							<span class="wid100">优惠券</span> <span class="">
								{{ newusercouponconfig.coupon_name || '未配置' }}
							</span>
						</li>
					</ul>
				</div>
			</PageMain>
			<!-- <div class="w-49.5% h-10"></div> -->
			<PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#e67c28]">
								公章配置
							</h1>
						</div>
					</div>
					<div class="ml-auto" v-if="userStore.permissions.includes('gongzhangedit')">
						<HButton outline @click="changeShowType(4)">
							编辑
						</HButton>
					</div>
				</template>
				<div class="boxaa pb-4">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<!-- 	<li>
							<span class="wid100">客服联系电话</span> <span class="">{{ serviceconfig.phone }}</span>
						</li> -->
						<li class="pt-8">
							<span class="wid100">公章</span> <span class="">
								<!-- {{ serviceconfig.wxQrcode }} -->
								<image-preview :src="cachetconfig.image" :width="100" :height="100" class="" />
							</span>
						</li>
					</ul>
				</div>
			</PageMain>
			<!-- <PageMain class="ecology">
				<template #title>
					<div class="title-info">
						<div>
							<h1 class="c-[#e67c28]">
								合同配置
							</h1>
						</div>
					</div>
					<div class="ml-auto">
						<HButton outline @click="changeShowType(4)">
							编辑
						</HButton>
					</div>
				</template>
				<div class="boxaa pb-4">
					<ul class="f16 m-0 pr-8 text-size-sm leading-6">
						<li>
							<span class="wid100">合约阅读时间</span> <span class="">
								{{ readpactconfig.second?readpactconfig.second+'秒' : '未配置' }}
							</span>
						</li>
					</ul>
				</div>
			</PageMain> -->
		</div>
		<HDialog v-model="show.addAndModify" :title="show.typeName[show.type]">
			<div style="padding: 0 18px;">
				<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" label-width="100px">
					<div v-if="show.type==1">
						<el-form-item label="小程序名称" prop="name">
							<el-input v-model="form.name" size="large" placeholder="请输入小程序名称" clearable />
						</el-form-item>
						<el-form-item label="AppID" prop="AppID">
							<el-input v-model="form.AppID" size="large" placeholder="请输入AppID" clearable />
						</el-form-item>
						<el-form-item label="AppSecret" prop="name">
							<el-input v-model="form.AppSecret" size="large" placeholder="请输入AppSecret" clearable />
						</el-form-item>
						<el-form-item label="首页分享标语" prop="title">
							<el-input v-model="form.title" size="large" placeholder="请输入首页分享标语" clearable />
						</el-form-item>
					</div>
					<div v-if="show.type==2">
						<el-form-item label="客服联系电话" prop="phone">
							<el-input v-model="form.phone" size="large" placeholder="请输入客服联系电话" clearable />
						</el-form-item>
						<el-form-item label="客服二维码" prop="wxQrcode" class="avatar">
							<ImageUpload v-model:url="form.wxQrcode" :width="1" :notip="false" :height="1"
								@on-success="handleSuccess($event)" />
						</el-form-item>
					</div>
					<div v-if="show.type==3">
						<el-form-item label="关联优惠券：" prop="coupon_name">
							<div @click="showGetCoupon = true" style="width:100%;">
								<el-input style="width:100%;" v-model="form.coupon_name" size="large"
									placeholder="请添加关联优惠券" clearable />
							</div>
						</el-form-item>
					</div>
					<div v-if="show.type==4">
						<el-form-item label="公章" prop="image" class="avatar">
							<ImageUpload v-model:url="form.image" :width="1" :notip="false" :height="1"
								@on-success="handleSuccessimage($event)" />
						</el-form-item>
					</div>
					<div v-if="show.type==5">
						<el-form-item label="合同阅读时间" prop="second">
							<el-input v-model="form.second" size="large" placeholder="请输入小程序名称" clearable> <template
									#append>秒</template>
							</el-input>
						</el-form-item>
					</div>
					<div v-if="show.type==5">
						<el-form-item label="空间名称" prop="name">
							<el-input v-model="form.name" size="large" placeholder="请输入空间名称" clearable />
						</el-form-item>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="访问域名" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入访问域名" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="绑定域名" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入绑定域名" clearable />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="ACCESSKEY" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入ACCESSKEY" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="SECRETKEY" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入SECRETKEY" clearable />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div v-if="show.type==5">
						<el-form-item label="AccessKeyID" prop="name">
							<el-input v-model="form.name" size="large" placeholder="请输入AccessKeyID" clearable />
						</el-form-item>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="AccessKeySecret" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入AccessKeySecret"
										clearable />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="短信签名" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入短信签名" clearable />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div v-if="show.type==5">
						<el-form-item label="公众号名称" prop="name">
							<el-input v-model="form.name" size="large" placeholder="请输入公众号名称" clearable />
						</el-form-item>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="AppID" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入公众号AppID" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="AppSecret" prop="name">
									<el-input v-model="form.name" size="large" placeholder="请输入公众号AppSecret"
										clearable />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="show.addAndModify = false,form={} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<GetCoupon v-if="showGetCoupon" v-model="showGetCoupon" @changedata="changedata($event)" />
	</div>
</template>

<style lang="scss" scoped>
	.container {
		:deep(.tox-tinymce) {
			height: calc(100% - 40px - 32px) !important;
		}
	}

	.fotterbtn {

		// padding: 8px 32px;
		.cancel {
			color: #409eff;
			border: 1px solid #409eff;
		}
	}

	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		/* :deep(.el-upload__tip) {
	  display: none !important;
	} */
	}

	.boxaa {
		ul {
			list-style: none;

			li {
				display: flex;
				justify-content: space-between;
				line-height: 64px;
				border-bottom: 1px solid #eee;
			}
		}
	}

	.text-emphasis {
		text-emphasis-style: "❤";
	}

	.ecology {
		--at-apply: flex-1 m-0;

		:deep(.title-container) {
			--at-apply: flex items-center justify-between flex-wrap gap-4;

			.title-info {
				--at-apply: flex items-center gap-4;

				img {
					--at-apply: block w-12 h-12;
				}

				h1 {
					--at-apply: m-0 text-2xl;
				}

				h2 {
					--at-apply: m-0 text-base text-stone-5 font-normal;
				}
			}
		}
	}

	.el-card.grid-content {
		width: 50%;
		// height: 75vh;
		padding-bottom: 10px;
		margin: auto;
		// overflow-y: auto;
		background-color: #fff;
		border: none;
		transition: var(--el-transition-duration);
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.font-16 {
		font-size: 16px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.its {
		border-bottom: 1px solid var(--el-card-border-color);
	}

	.its:last-child {
		border-bottom: none;
	}

	.el-table {
		:deep(.is-text) {
			padding: 8px 0;
		}
	}

	:deep(.el-button__text--expand) {
		margin-right: 0;
		letter-spacing: 0;
	}

	.wid100 {
		width: 100px;
	}

	.wid140 {
		width: 140px;
	}

	.title {
		position: relative;
		height: 40px;
		padding-left: 16px;
		font-size: 20px;
		line-height: 40px;
	}

	.title::before {
		position: absolute;
		top: 50%;
		left: 0;
		width: 4px;
		height: 20px;
		content: "";
		background: var(--el-color-primary);
		border-radius: 4px;
		transform: translateY(-50%);
	}

	.el-card.item {
		margin-bottom: 16px;
		border-bottom: 1px solid var(--el-card-border-color);

		:deep(.el-card__body) {
			padding: 0;
		}
	}

	.p15 {
		padding: 15px;
	}

	.bot-info {
		border-top: 1px solid var(--el-card-border-color);

		.link {
			color: #3370ff;
		}
	}
</style>